<style scoped>
.cardType {
  margin-right: 0.5vw;
  padding: 0 15px;
  background-color: white;
  height: 95vh;
  position: relative;
}
.btn {
  padding: 15px 0;
}
</style>

<template>
  <div class="cardType">
    <div class="btn">
      <el-button @click="newBuildBtnClick" icon="el-icon-plus" type="primary"
        >新建</el-button
      >
      <el-button @click="dele" icon="el-icon-delete">删除</el-button>
    </div>

    <el-table
      :data="tableData"
      style="width: 100%"
      highlight-current-row
      :header-cell-style="{ background: '#f4f4f4', padding: 0, height: '40px' }"
      :cell-style="{ padding: 0, height: '36px' }"
      height="87vh"
      @current-change="handleCurrentChange"
    >
      <el-table-column prop="cardNo" label="卡别编号"></el-table-column>
      <el-table-column prop="cardName" label="卡名"></el-table-column>
      <el-table-column prop="discount" label="折数"></el-table-column>
      <el-table-column prop="isEditBool" label="是否编辑">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isEditBool" disabled></el-switch>
        </template>
      </el-table-column>
    </el-table>

    <newcard
      v-if="showNew"
      @closeNewBUildDialog="closeNewBUildDialog"
      @closeNew="
        () => {
          this.showNew = false
        }
      "
    ></newcard>
  </div>
</template>

<script>
import newcard from './childComp/newCard.vue'

import { list, del } from '../../../network/card'
export default {
  name: 'cardType',
  created() {
    this.getList()
  },
  data() {
    return {
      tableData: [],
      showNew: false,
      id: ''
    }
  },
  methods: {
    // 新建按钮被点击
    newBuildBtnClick() {
      this.showNew = true
    },
    // 监听子组件的事件，关闭弹出层并且刷新数据
    closeNewBUildDialog() {
      this.getList()
      this.showNew = false
    },
    getList() {
      this.id = ''
      list().then((res) => {
        this.tableData = res.data.data || []
        this.tableData.forEach((e) => {
          e.isEditBool = Boolean(e.isEdit)
        })
      })
    },
    handleCurrentChange(row) {
      // console.log(row.id);
      this.id = row ? row.id : ''
    },
    dele() {
      if (!this.id) {
        this.$message.info('请点击一条数据再进行删除操作')
        return
      }
      del({ id: this.id }).then((res) => {
        if (res.data.code == 200) {
          this.$message.success('删除成功')
          this.getList()
        }
      })
    }
  },
  components: {
    newcard
  }
}
</script>
